<script setup>
import { ref } from 'vue';
import ScrollAnimations from '../components/ScrollAnimations/ScrollAnimations.vue'
const isAnimated = ref(false);

const logStart = () => console.log('动画开始');
const logEnd = () => console.log('动画结束');
</script>

<template>
<div>
  <h2>1. 基本淡入效果</h2>
  <ScrollAnimations animation-type="fadeIn">
    <div class="content">默认淡入效果</div>
  </ScrollAnimations>
  <h2>2. 带参数的滑动效果</h2>
  <ScrollAnimations
      animation-type="slideInLeft"
      :animation-duration="1.5"
      :animation-delay="0.3"
      :trigger-offset="0.2"
  >
    <div class="card">快速触发的滑动卡片</div>
  </ScrollAnimations>
  <h2>3. 多元素动画</h2>
  <ScrollAnimations
      target-selector=".item"
      :once="false"
      animation-type="slideInRight"
  >
    <div v-for="i in 5" :key="i" class="item">
      项目 {{ i }} - 重复触发的动画
    </div>
  </ScrollAnimations>
  <h2>4. 手动控制动画状态</h2>
  <ScrollAnimations
      v-model:is-animated="isAnimated"
      animation-type="fadeIn"
  >
    <div>可重置的动画内容</div>
  </ScrollAnimations>
  <button @click="isAnimated = false">重置动画</button>
  <h2>5. 组合动画与事件处理</h2>
  <ScrollAnimations
      animation-type="slideInLeft"
      @animation-start="logStart"
      @animation-end="logEnd"
  >
    <div class="stats">统计卡片</div>
  </ScrollAnimations>

</div>
</template>

<style scoped>
.scroll-animation {
  will-change: transform, opacity;
}
.animate-zoomIn {
  animation-name: zoomIn;
}

@keyframes zoomIn {
  from {
    transform: scale(0.5);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}
</style>